<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="library/layui/css/layui.css">
    <link rel="stylesheet" href="index.css">
    <title>数据采集</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <div class="head">
                <h3 id="project_title">数据采集</h3>
                <div class="tool">
                    <img id="minimize" src="assets/images/minimize.png" alt="">
                    <img id="close" src="assets/images/close.png" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-row">
                <div class="boxall">
                    <div class="layui-row">
                        <div class="alltitle">实时数据</div>
                        <ul class="temperature">
                            <li>
                                <h2 id="mpressure">0</h2><span>近端压力(Mpa)</span>
                            </li>
                            <li>
                                <h2 id="rpressure">0</h2><span>远端压力(Mpa)</span>
                            </li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="temperature">
                            <li>
                                <h2 id="mtemplature">0</h2><span>介质温度(℃)</span>
                            </li>
                            <li>
                                <h2 id="etemplature">0</h2><span>环境温度(℃)</span>
                            </li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="temperature">
                            <li>
                                <h2 id="mmachinetemplature">0</h2><span>近端机箱温度(℃)</span>
                            </li>
                            <li>
                                <h2 id="rmachinetemplature">0</h2><span>远端机箱温度(℃)</span>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-row">
                        <div class="boxfoot"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
            <div class="boxall">
                <div class="alltitle">计时信息</div>
                <ul class="temperature">
                    <li>
                        <h2 id="total_time">00:00:00</h2><span>总计用时</span>
                    </li>
                    <li>
                        <h2 id="stage_time">----</h2><span id="stage_name">----</span>
                    </li>
                </ul>
                <div style="border-bottom: 1px solid rgba(255,255,255,.2)"></div>
                <ul class="keeptime">
                    <li id="firstStageRow">
                        <h2 id="firstStage">--</h2><span>阶段一</span>
                    </li>
                    <li id="secondStageRow">
                        <h2 id="secondStage">--</h2><span>阶段二</span>
                    </li>
                    <li id="thirdStageRow">
                        <h2 id="thirdStage">--</h2><span>阶段三</span>
                    </li>
                    <li id="intensityStageRow">
                        <h2 id="intensityStage">--</h2><span>强度段</span>
                    </li>
                    <li id="rigorStageRow">
                        <h2 id="rigorStage">--</h2><span>严密段</span>
                    </li>
                </ul>
                <div style="border-bottom: 1px solid rgba(255,255,255,.2)"></div>
                <ul class="keeptime">
                    <li id="start">
                        <div class="image"><img src="assets/images/start.png" alt=""></div>
                        <span id="startBtn">开始采集</span>
                    </li>
                    <li id="report" class="layui-hide">
                        <div class="image"><img src="assets/images/report.png" alt=""></div>
                        <span>试压报告</span>
                    </li>
                    <li id="project">
                        <div class="image"><img src="assets/images/project.png" alt=""></div>
                        <span>选择工程</span>
                    </li>
                    <li id="template">
                        <div class="image"><img src="assets/images/template.png" alt=""></div>
                        <span>添加模板</span>
                    </li>
                    <li id="set">
                        <div class="image"><img src="assets/images/set.png" alt=""></div>
                        <span>设置面板</span>
                    </li>
                </ul>
                <div class="boxfoot"></div>
            </div>
        </div>
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
            <div class="boxall" style="margin-right: .15rem;">
                <div class="alltitle">信息面板</div>
                <ul class="time">
                    <li>
                        <h2 id="time">00:00:00</h2><span id="date">xxx-xx-xx</span>
                    </li>
                </ul>
                
                <div style="border-bottom: 1px solid rgba(255,255,255,.2)"></div>
                <div id="messagebox" class="message">
                    <table class="layui-hide" id="message"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
            <div class="layui-row">
                <div class="boxall">
                    <div class="alltitle">压力曲线</div>
                    <div class="line" id="pressure"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
            <div class="layui-row">
                <div class="boxall">
                    <div class="alltitle">温度曲线</div>
                    <div class="line" id="templature"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="library/jquery/jquery-3.7.1.min.js"></script>
    <script src="library/layui/layui.js"></script>
    <script src="library/moment/moment.js"></script>
    <script src="library/echart/echarts.min.js"></script>
    <script src="index.js"></script>
    <script>
        setupLineChart();
        //压力图表
        var mainPressureChart;
        var remotePressureChart;
        //折线图
        function setupLineChart() {
            var templatureLineChartOption = lineChartOption();
            templatureLineChartOption.title = { text: "温度曲线", textStyle: { color: "#ffffff" } }
            templatureLineChartOption.legend = {
                data: [
                    { name: '介质温度', textStyle: { color: "#ffffff" } },
                    { name: '环境温度', textStyle: { color: "#ffffff" } },
                ]
            }
            templatureLineChartOption.series = [
                {
                    name: '介质温度',
                    type: 'line',
                    smooth: true,
                    color: "#ff5722"
                },
                {
                    name: '环境温度',
                    type: 'line',
                    smooth: true,
                    color: "#ffb800"
                }
            ]

            templatureChart = echarts.init(document.getElementById('templature'));
            templatureChart.setOption(templatureLineChartOption);

            var pressureLineChartOption = lineChartOption();
            pressureLineChartOption.title = { text: "压力曲线", textStyle: { color: "#ffffff" } }
            pressureLineChartOption.legend = {
                data: [
                    { name: '近端压力', textStyle: { color: "#ffffff" } },
                    { name: '远端压力', textStyle: { color: "#ffffff" } },
                ]
            }
            pressureLineChartOption.series = [
                {
                    name: '近端压力',
                    type: 'line',
                    smooth: true
                },
                {
                    name: '远端压力',
                    type: 'line',
                    smooth: true
                }
            ]
            pressureChart = echarts.init(document.getElementById('pressure'));
            pressureChart.setOption(pressureLineChartOption);
        }

        //setupPressureChart();
        //压力图表
        var mainPressureChart;
        var remotePressureChart;
        //配置压力表盘
        function setupPressureChart() {
            var mainOption = pressureChartOptions("main");
            var mainPressureChartDom = document.getElementById('mainPressure');
            mainPressureChart = echarts.init(mainPressureChartDom);
            mainPressureChart.setOption(mainOption);

            var remoteOption = pressureChartOptions("remote");
            var remotePressureChartDom = document.getElementById('remotePressure');
            remotePressureChart = echarts.init(remotePressureChartDom);
            remotePressureChart.setOption(remoteOption);
        }

        //近端信息
        var mainPressure = 0;
        var mediumTemplature = 0;
        var enviromentTemplature = 0;
        var mainMachineTemplature = 0;
        var mediumTemplatureData = [];
        var enviromentTemplatureData = [];
        var mainPressureData = [];

        //远端信息
        var remotePressure = 0;
        var remoteMachineTemplature = 0;
        var remotePressureData = [];

        var chartInterval;
        var dataZoom = false;

        ///更新曲线
        function updateChart() {
            chartInterval = setInterval(() => {
                var time = moment().format("YYYY-MM-DD HH:mm:ss");
                var mediumTemplatureItem = [time, mediumTemplature];
                mediumTemplatureData.push(mediumTemplatureItem);
                var enviromentTemplatureItem = [time, enviromentTemplature];
                enviromentTemplatureData.push(enviromentTemplatureItem);
                var mainPressureItem = [time, mainPressure];
                mainPressureData.push(mainPressureItem);
                var remotePressureItem = [time, remotePressure];
                remotePressureData.push(remotePressureItem);
                var templatureChartOption = {
                    series: [
                        {
                            name: '介质温度',
                            data: mediumTemplatureData
                        },
                        {
                            name: '环境温度',
                            data: enviromentTemplatureData
                        }
                    ]
                }

                var pressureChartOption = {
                    series: [
                        {
                            name: '近端压力',
                            data: mainPressureData
                        },
                        {
                            name: '远端压力',
                            data: remotePressureData
                        }
                    ]
                }

                if (mediumTemplatureData.length > 10 && !dataZoom) {
                    updateDataZoom(60, 100)
                    dataZoom = true;
                }

                templatureChart.setOption(templatureChartOption);
                pressureChart.setOption(pressureChartOption);
            }, 1000);
        }

        function updateDataZoom(start, end) {
            var dataZoomOption = [{
                type: 'slider',
                realtime: true,
                start: start,
                end: end
            }];
            var option = {
                dataZoom: dataZoomOption
            }

            templatureChart.setOption(option);
            pressureChart.setOption(option);
        }

    </script>
</body>

</html>